<script setup lang="ts">
const carouselData = [
  {
    id: 1,
    img: "https://img1.baidu.com/it/u=3445463840,2455115276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "宝宝辅食狂欢日",
    description: "全场爆款低至69元",
  },
  {
    id: 2,
    img: "https://img1.baidu.com/it/u=3445463840,2455115276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "宝宝辅食狂欢日",
    description: "全场爆款低至69元",
  },
  {
    id: 3,
    img: "https://img1.baidu.com/it/u=3445463840,2455115276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "宝宝辅食狂欢日",
    description: "全场爆款低至69元",
  },
  {
    id: 4,
    img: "https://img1.baidu.com/it/u=3445463840,2455115276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "宝宝辅食狂欢日",
    description: "全场爆款低至69元",
  },
  {
    id: 5,
    img: "https://img1.baidu.com/it/u=3445463840,2455115276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "宝宝辅食狂欢日",
    description: "全场爆款低至69元",
  },
  {
    id: 6,
    img: "https://img1.baidu.com/it/u=3445463840,2455115276&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
    title: "宝宝辅食狂欢日",
    description: "全场爆款低至69元",
  },
];

</script>

<template>
  <div class="home-carousel">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in carouselData" :key="item.id">
        <div class="carousel-item-left">
          <div class="carousel-item-title">
            {{ item.title }}
          </div>
          <div class="carousel-item-description">
            {{ item.description }}
          </div>
        </div>
        <div class="carousel-item-right">
          <img :src="item.img" alt="carousel-item-img" />
        </div>
      </van-swipe-item>
    </van-swipe>

  </div>
  <!-- <div class="banner-hidden-container">
    <img class="banner-hidden" src="@/assets/banner前遮挡@3x.png" alt="hidden" />
  </div> -->
</template>

<style scoped>
.home-carousel {
  display: flex;
  position: relative;
  margin-top: 208px;
  justify-content: center;
  align-items: center;
  width: 694px;
  height: 270px;
  background: linear-gradient(54deg, rgba(250, 115, 50, 0.8) 0%, rgba(237, 57, 95, 0.8) 34%, rgba(234, 40, 55, 0.8) 100%);
  border-radius: 20px;

  .carousel-item-left {
    position: absolute;
    margin-top: 50px;
    margin-left: 37px;

    .carousel-item-title {
      width: 350px;
      height: 57px;
      font-family: FZZYJW--GB1-0;
      font-size: 50px;
      font-weight: bold;
      line-height: 57px;
      color: #FFFFFF;
      letter-spacing: 0;
    }

    .carousel-item-description {
      margin-top: 17px;
      width: 246px;
      height: 42px;
      opacity: 0.8;
      font-family: PingFangSC-Semibold;
      font-size: 30px;
      color: #FFFFFF;
      letter-spacing: 0;
    }
  }

  .home-carousel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(54deg, rgba(250, 115, 50, 0.8) 0%, rgba(237, 57, 95, 0.8) 34%, rgba(234, 40, 55, 0.8) 100%);
    border-radius: 20px;
    z-index: -1;
  }

  .carousel-item-right {
    margin-top: 44px;
    margin-left: 468px;
  }

  img {
    width: 170px;
    height: 170px;
  }
}
</style>